<%@ taglib uri='http://java.sun.com/jsp/jstl/core' prefix='c' %>

<c:url value="/editProfile.html" var="editProfileUrl"/>
<c:url value="/loadProfile.html" var="loadProfileUrl"/>

<html>
<head>
	<link rel="stylesheet" href="css/stylekram.css" type="text/css" />
	<link rel="stylesheet" href="css/customkram.css" type="text/css" />
	<script type="text/javascript" src="js/jquery-1.6.js"></script>
	<script type="text/javascript" src="js/profile.js"></script>
	

	<title>User Records</title>
	<script type="text/javascript"> 
	$(document).ready(function(){
		
		myUrlHolder.editProfile = '${editProfileUrl}';
		myUrlHolder.loadProfile = '${loadProfileUrl}';

		loadProfile();
		
		$('#profileForm').show();
		$('#editProfileForm').hide();

		$('#editButton').click(function() {
			$('#profileForm').hide();
			$('#editProfileForm').show();
			$('#editButton').attr('disabled', 'disabled');
			//alert("Edit button Hit");

		});

		$('#closeEdForm').click(function() {
			$('#profileForm').show();
			$('#editProfileForm').hide();
			$('#editButton').removeAttr('disabled');
		});

		$('#editProfileForm').submit(function() {
			event.preventDefault();
			submitProfileForm();
		});
		
	});

	

	</script>
	
</head>

<body>
	
	<!-- <div class="ui-jqgrid-titlebar ui-widget-header ui-corner-top ui-helper-clearfix">
		<a class="ui-jqgrid-titlebar-close HeaderButton" href="javascript:void(0)" role="link" style="right: 0px;">
		<span class="ui-icon ui-icon-circle-triangle-n"></span>
		</a>
	<span class="ui-jqgrid-title">Record System</span>
</div>
	 -->
	
	<%-- <table id='tableUsers'>
		<caption></caption>
		<thead>
			<tr>
				<th></th>
				<th>Username</th>
				<th>First Name</th>
				<th>Last Name</th>
				<th>Role</th>
			</tr>
		</thead>
	</table> --%>
	
	<div id='controlBar'>
		<!-- <input type='button' value='New' id='newBtn' /> -->
		<input type='button' value='Edit' id='editButton' />
		<!-- <input type='button' value='Delete' id='deleteBtn' />
		<input type='button' value='Reload' id='reloadBtn' /> -->
	</div>
	
	<div id='profileForm'>
		<form>
  			<fieldset>
				<legend>My Profile</legend>
				<label for='fname'>First Name</label><input type='text' id='fname' disabled= 'disabled' /><br/>
				<label for='lname'>Last Name</label><input type='text' id='lname' disabled= 'disabled'/><br/>
				
				<label for='address'>Address</label><input type='text' id='address' disabled= 'disabled'/><br/>
				<label for='phone'>Phone</label><input type='text' id='phone' disabled= 'disabled'/><br/>
				<label for='pan'>Pan No.</label><input type='text' id='pan' disabled= 'disabled'/><br/>
  			</fieldset>
			<!-- <input type='button' value='Close' id='closeProfileForm' />
			<input type='submit' value='Submit'/> -->
		</form>
	</div>
	
	<div id='editProfileForm'>
		<form>
  			<fieldset>
				<legend>Edit Profile</legend>
				<label for='firstName'>First Name</label><input type='text' id='firstName'/><br/>
				<label for='lastName'>Last Name</label><input type='text' id='lastName'/><br/>
				<label for='newAddress'>Address</label><input type='text' id='newAddress'/><br/>
				<label for='newPhone'>Phone</label><input type='text' id='newPhone'/><br/>
				<label for='newPan'>Pan No.</label><input type='text' id='newPan'/><br/>
			</fieldset>
			<input type='button' value='Close' id='closeEdForm' />
			<input type='submit' value='Submit'/>
		</form>
	</div>
	
</body>
</html>